<template>
  <div class="Mvlist">
    <!-- 最新mv -->
    <ch-newmvlist :MvList="newMvs" :title="'最新MV'" />
    <!-- 热播mv -->
    <!-- <ch-hotmvlist :MvList="newMvs" :title="'热播'"/> -->
    <!-- 热播mv -->
    <ch-rcmdmvlist :MvList="rcmdlist" :title="'网易出品'" />
    <!-- mv排行榜 -->
    <ch-mvtop />
  </div>
</template>

<script>
import NewMvlist from "./components/mvlist";
// import HotMvlist from './components/mvlist'
import RcmdMvlist from "./components/mvlist";
import MvTop from "./components/mvTop";
import { getNewMv, getrcmdMv } from "@/api/mv.js";
export default {
  name: "Mvlist",
  components: {
    "ch-newmvlist": NewMvlist,
    // 'ch-hotmvlist': HotMvlist,
    "ch-rcmdmvlist": RcmdMvlist,
    "ch-mvtop": MvTop
  },
  props: {},
  data() {
    return {
      newMvs: [], // 最新mv
      rcmdlist: [] // 网易云mv
    };
  },
  computed: {},
  watch: {
    $route() {
      // 获取最新mv
      this.getNewMv();
      // 获取热门mv
      // this.getHotMv()
    }
  },
  created() {
    // 获取最新mv
    this.getNewMv();
    // 获取热门mv
    this.getHotMv();
    // 获取网易云mv
    this.getrcmdMv();
  },
  mounted() {},
  methods: {
    // 获取最新mv
    async getNewMv() {
      const { data } = await getNewMv({
        limit: 8,
        area: this.$route.query.cat == "全部" ? "" : this.$route.query.cat
      });
      this.newMvs = data.data;
    },
    // 获取热门mv
    async getHotMv() {
      // const { data } = await getHotMv()
    },
    // 获取网易云mv
    async getrcmdMv() {
      const { data } = await getrcmdMv({
        limit: 8
      });
      this.rcmdlist = data.data;
    }
  }
};
</script>

<style scoped lang="scss">
.Mvlist {
  padding: 0 9.375rem;
}
</style>
